.el-tag {
  background-color: #eaefff;
  border: 1px solid #d5defe;
  color: var(--color-primary);
  &.is-hit {
    border-color: var(--color-primary);
  }

  @each $type in (success, warning, danger, info) {
    &.el-tag--#{$type} {
      background-color: var(--color-#{$type}-plain);
      border-color: var(--color-#{$type}-plain-border);
      color: var(--color-#{$type});
      &.is-hit {
        border-color: var(--color-#{$type});
      }
      .el-tag__close {
        color: var(--color-#{$type});
        &:hover {
          color: #fff;
          background-color: var(--color-#{$type});
        }
      }
    }
  }
  .el-tag__close {
    color: var(--color-primary);
    &:hover {
      color: #fff;
      background-color: var(--color-primary);
    }
  }
}
.el-tag--dark {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  &.is-hit {
    border-color: var(--color-primary);
  }
  .el-tag__close {
    color: #fff;
    &:hover {
      color: #fff;
      background-color: var(--color-primary-hover);
    }
  }

  @each $type in (success, warning, danger, info) {
    &.el-tag--#{$type} {
      background-color: var(--color-#{$type}-plain);
      border-color: var(--color-#{$type}-plain-border);
      color: var(--color-#{$type});
      &.is-hit {
        border-color: var(--color-#{$type});
      }
      .el-tag__close {
        color: #fff;
        &:hover {
          color: #fff;
          background-color: var(--color-#{$type});
        }
      }
    }
  }
}
.el-tag--plain {
  background-color: #fff;
  border-color: #abbdfd;
  color: var(--color-primary);
  &.is-hit {
    border-color: var(--color-primary);
  }
  .el-tag__close {
    color: var(--color-primary);
    &:hover {
      color: #fff;
      background-color: var(--color-primary);
    }
  }
  @each $type in (success, warning, danger, info) {
    &.el-tag--#{$type} {
      background-color: #fff;
      border-color: var(--color-#{$type}-plain-border);
      color: var(--color-font-third);
      &.is-hit {
        border-color: var(--color-#{$type});
      }
      .el-tag__close {
        color: var(--color-font-third);
        &:hover {
          color: var(--color-font-third);
          background-color: var(--color-font-third);
        }
      }
    }
  }
}
